<template>
  <div class="xmjb">
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-button @click="setDefaultFilterValue">设置默认过滤值</el-button>
    <el-table
      ref="filterTable"
      :data="tableData"
      @filter-change="filterChange"
      style="width: 100%">

      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        column-key="tagKey"
        :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions>{{scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  
  </div>
</template>

<script>
export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家',
          fileModule:'shuizhitu'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司',
          fileModule:'shuizhitu'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家',
          fileModule:'zhuzhuangtu'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司',
          fileModule:'otherdocument'
        }]
      }
    },

    mounted() {
      this.setDefaultFilterValue();
    },

    methods: {
      setDefaultFilterValue(){
        this.$refs.filterTable.columns[3].filteredValue = ["家"];
      },
      filterChange(value,row,column){
        console.log(value.tagKey);
        const filterValue = (value.tagKey || [])[0];
        console.log("接下来将过滤条件"+filterValue+"加入post发送值中开始发送http请求");
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
    }
  }
</script>
<style scoped>
.table,
th,
tr {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}
.xmgk{
    height:100px;
    background-color:rgb(193, 194, 255, .6);
}
.leibie{
width:100px;
background-color:rgb(193, 194, 255, .6);
}
.leibie2{
    width:100px;
}
</style>